<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">components/area-selector.js | API</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<link rel="stylesheet" href="./inject/css/0-vue.css"><link rel="stylesheet" href="./inject/css/0-app.css"><link rel="stylesheet" href="./inject/css/0-esdoc.css"><script src="./inject/script/0-custom.js"></script><meta name="description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="API"><meta property="twitter:description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/easysoft/xuanxuan.git"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/app-avatar.js~AppAvatar.html">AppAvatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/area-selector.js~AreaSelector.html">AreaSelector</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/avatar.js~Avatar.html">Avatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/button.js~Button.html">Button</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/checkbox.js~Checkbox.html">Checkbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/click-outside-wrapper.js~ClickOutsideWrapper.html">ClickOutsideWrapper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-container.js~DisplayContainer.html">DisplayContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-layer.js~DisplayLayer.html">DisplayLayer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/group-list.js~GroupList.html">GroupList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/heading.js~Heading.html">Heading</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/hotkey-input-control.js~HotkeyInputControl.html">HotkeyInputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/icon.js~MDIcon.html">MDIcon</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-cutter.js~ImageCutter.html">ImageCutter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-holder.js~ImageHolder.html">ImageHolder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/input-control.js~InputControl.html">InputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/list-item.js~ListItem.html">ListItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/pager.js~Pager.html">Pager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio-group.js~RadioGroup.html">RadioGroup</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio.js~Radio.html">Radio</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/search-control.js~SearchControl.html">SearchControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/select-box.js~Selectbox.html">Selectbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/spinner.js~Spinner.html">Spinner</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tab-pane.js~TabPane.html">TabPane</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tabs.js~Tabs.html">Tabs</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showContextMenu">showContextMenu</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayGetRef">displayGetRef</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayHide">displayHide</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayRemove">displayRemove</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displaySetStyle">displaySetStyle</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayShow">displayShow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showImageViewer">showImageViewer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showMessager">showMessager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showAlert">showAlert</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showConfirm">showConfirm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showModal">showModal</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPrompt">showPrompt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPopover">showPopover</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">components/area-selector.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import React, {Component} from &apos;react&apos;;
import PropTypes from &apos;prop-types&apos;;

/**
 * &#x5224;&#x5B9A;&#x4E00;&#x4E2A;&#x70B9;&#x662F;&#x5426;&#x5728;&#x77E9;&#x5F62;&#x533A;&#x57DF;&#x5185;
 *
 * @private
 * @param {{left: number, top: number}} point &#x8981;&#x5224;&#x5B9A;&#x7684;&#x70B9;&#x4F4D;&#x7F6E;
 * @param {{left: number, top: number, width: number, height: number}} rect &#x8981;&#x5224;&#x5B9A;&#x5BF9;&#x77E9;&#x5F62;&#x533A;&#x57DF;
 * @return {boolean} &#x5982;&#x679C;&#x5728;&#x77E9;&#x5F62;&#x533A;&#x57DF;&#x5185;&#x5219;&#x8FD4;&#x56DE; &lt;code&gt;true&lt;/code&gt; &#x5426;&#x5219; &#x8FD4;&#x56DE; &lt;code&gt;false&lt;/code&gt;
 */
const isPiontInRect = (point, rect) =&gt; (
    rect.width &gt; 0 &amp;&amp; rect.height &gt; 0
        &amp;&amp; point.left &gt;= rect.left
        &amp;&amp; point.left &lt;= (rect.left + rect.width)
        &amp;&amp; point.top &gt;= rect.top
        &amp;&amp; point.top &lt;= (rect.top + rect.height)
);

/**
 * &#x5224;&#x5B9A;&#x4E00;&#x4E2A;&#x70B9;&#x5728;&#x77E9;&#x5F62;&#x533A;&#x57DF;&#x7684;&#x65B9;&#x4F4D;
 *
 * @private
 * @param {{left: number, top: number}} pos
 * @param {{left: number, top: number, width: number, height: number}} rect &#x8981;&#x5224;&#x5B9A;&#x5BF9;&#x77E9;&#x5F62;&#x533A;&#x57DF;
 * @return {string}
 */
const caculatePosition = (pos, area) =&gt; {
    const halfHotSize = 5;
    const hotSize = halfHotSize + halfHotSize;
    if (isPiontInRect(pos, {
        left: area.left + halfHotSize,
        top: area.top + halfHotSize,
        width: area.width - hotSize,
        height: area.height - hotSize
    })) {
        return &apos;center&apos;;
    }
    if (isPiontInRect(pos, {
        left: area.left - halfHotSize,
        top: area.top + halfHotSize,
        width: hotSize,
        height: area.height - hotSize
    })) {
        return &apos;left&apos;;
    }
    if (isPiontInRect(pos, {
        left: (area.left + area.width) - halfHotSize,
        top: area.top + halfHotSize,
        width: hotSize,
        height: area.height - hotSize
    })) {
        return &apos;right&apos;;
    }
    if (isPiontInRect(pos, {
        left: area.left + halfHotSize,
        top: area.top - halfHotSize,
        width: area.width - hotSize,
        height: hotSize
    })) {
        return &apos;top&apos;;
    }
    if (isPiontInRect(pos, {
        left: area.left + halfHotSize,
        top: (area.top + area.height) - halfHotSize,
        width: area.width - hotSize,
        height: hotSize
    })) {
        return &apos;bottom&apos;;
    }
    if (isPiontInRect(pos, {
        left: area.left - halfHotSize,
        top: area.top - halfHotSize,
        width: hotSize,
        height: hotSize
    })) {
        return &apos;top-left&apos;;
    }
    if (isPiontInRect(pos, {
        left: (area.left + area.width) - halfHotSize,
        top: area.top - halfHotSize,
        width: hotSize,
        height: hotSize
    })) {
        return &apos;top-right&apos;;
    }
    if (isPiontInRect(pos, {
        left: area.left - halfHotSize,
        top: (area.top + area.height) - halfHotSize,
        width: hotSize,
        height: hotSize
    })) {
        return &apos;bottom-left&apos;;
    }
    if (isPiontInRect(pos, {
        left: (area.left + area.width) - halfHotSize,
        top: (area.top + area.height) - halfHotSize,
        width: hotSize,
        height: hotSize
    })) {
        return &apos;bottom-right&apos;;
    }
    return null;
};

/**
* AreaSelector &#x7EC4;&#x4EF6; &#xFF0C;&#x663E;&#x793A;&#x4E00;&#x4E2A;AreaSelector
* @class AreaSelector
* @see https://react.docschina.org/docs/components-and-props.html
* @extends {Component}
* @example
* &lt;AreaSelector /&gt;
*/
export default class AreaSelector extends Component {
    /**
    * React &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;&#x7C7B;&#x578B;&#x68C0;&#x67E5;
    * @see https://react.docschina.org/docs/typechecking-with-proptypes.html
    * @static
    * @memberof AreaSelector
    * @return {Object}
    */
    static propTypes = {
        onSelectArea: PropTypes.func,
        toolbarStyle: PropTypes.object,
        toolbarHeight: PropTypes.number,
        style: PropTypes.object,
        toolbar: PropTypes.any,
        img: PropTypes.string
    };

    /**
    * React &#x7EC4;&#x4EF6;&#x9ED8;&#x8BA4;&#x5C5E;&#x6027;
    * @see https://react.docschina.org/docs/react-component.html#defaultprops
    * @type {object}
    * @memberof AreaSelector
    * @static
    */
    static defaultProps = {
        onSelectArea: null,
        toolbarStyle: null,
        toolbarHeight: 40,
        style: null,
        toolbar: null,
        img: null
    };

    /**
    * React &#x7EC4;&#x4EF6;&#x6784;&#x9020;&#x51FD;&#x6570;&#xFF0C;&#x521B;&#x5EFA;&#x4E00;&#x4E2A; AreaSelector &#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#xFF0C;&#x4F1A;&#x5728;&#x88C5;&#x914D;&#x4E4B;&#x524D;&#x88AB;&#x8C03;&#x7528;&#x3002;
    * @see https://react.docschina.org/docs/react-component.html#constructor
    * @param {Object?} props &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;&#x5BF9;&#x8C61;
    * @constructor
    */
    constructor(props) {
        super(props);

        /**
         * React &#x7EC4;&#x4EF6;&#x72B6;&#x6001;&#x5BF9;&#x8C61;
         * @see https://react.docschina.org/docs/state-and-lifecycle.html
         * @type {object}
         */
        this.state = {
            select: null,
            resizeable: false,
        };
    }

    /**
     * Set select range
     * &#x8BBE;&#x7F6E;&#x9009;&#x62E9;&#x7684;&#x8303;&#x56F4;
     *
     * @param {{left: number, top: number, width: number, height: number}} select &#x9009;&#x62E9;&#x5BF9;&#x8303;&#x56F4;&#x5BF9;&#x8C61;
     * @returns {Void}
     * @memberof AreaSelector
     * @instance
     */
    setSelect(select) {
        if (select) {
            select.height = Math.max(0, Math.min(this.contianer.clientHeight, select.height));
            select.width = Math.max(0, Math.min(this.contianer.clientWidth, select.width));

            select.top = Math.max(0, Math.min(this.contianer.clientHeight - select.height, select.top));
            select.left = Math.max(0, Math.min(this.contianer.clientWidth - select.width, select.left));
        }

        const {onSelectArea} = this.props;

        if (!this.state.select || (this.state.select &amp;&amp; (this.state.select.left !== select.left || this.state.select.top !== select.top || this.state.select.width !== select.width || this.state.select.height !== select.height))) {
            select.x = select.left;
            select.y = select.top;
            this.setState({select});
            return onSelectArea &amp;&amp; onSelectArea(select);
        }
    }

    /**
    * &#x5904;&#x7406;&#x9F20;&#x6807;&#x70B9;&#x51FB;&#x6309;&#x4E0B;&#x4E8B;&#x4EF6;
    * @param {Event} e &#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;
    * @memberof AreaSelector
    * @private
    * @return {void}
    * @instance
    */
    handleMouseDown = e =&gt; {
        this.mouseDownPos = {left: e.clientX, top: e.clientY};
        this.mouseDownSelect = Object.assign({}, this.state.select);
        if (this.state.resizeable) {
            this.mouseActionPosition = caculatePosition(this.mouseDownPos, this.mouseDownSelect);
        }
    }

    /**
    * &#x5904;&#x7406;&#x9F20;&#x6807;&#x79FB;&#x52A8;&#x4E8B;&#x4EF6;
    * @param {Event} e &#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;
    * @memberof AreaSelector
    * @private
    * @return {void}
    * @instance
    */
    handleMouseMove = e =&gt; {
        if (this.mouseDownPos) {
            this.mouseMovePos = {left: e.clientX, top: e.clientY};
            if (!this.state.resizeable) {
                this.setSelect({
                    left: Math.min(this.mouseDownPos.left, this.mouseMovePos.left),
                    top: Math.min(this.mouseDownPos.top, this.mouseMovePos.top),
                    width: Math.abs(this.mouseMovePos.left - this.mouseDownPos.left),
                    height: Math.abs(this.mouseMovePos.top - this.mouseDownPos.top),
                });
            } else {
                const select = this.state.select;
                if (select) {
                    const position = this.mouseActionPosition;
                    const deltaX = this.mouseMovePos.left - this.mouseDownPos.left;
                    const deltaY = this.mouseMovePos.top - this.mouseDownPos.top;
                    let newSelect = null;

                    switch (position) {
                    case &apos;center&apos;:
                        newSelect = {
                            top: this.mouseDownSelect.top + deltaY,
                            left: this.mouseDownSelect.left + deltaX,
                            width: select.width,
                            height: select.height
                        };
                        break;
                    case &apos;left&apos;:
                        newSelect = {
                            top: select.top,
                            left: this.mouseDownSelect.left + deltaX,
                            width: this.mouseDownSelect.width - deltaX,
                            height: select.height
                        };
                        break;
                    case &apos;right&apos;:
                        newSelect = {
                            top: select.top,
                            left: select.left,
                            width: this.mouseDownSelect.width + deltaX,
                            height: select.height
                        };
                        break;
                    case &apos;top&apos;:
                        newSelect = {
                            top: this.mouseDownSelect.top + deltaY,
                            left: select.left,
                            width: select.width,
                            height: this.mouseDownSelect.height - deltaY
                        };
                        break;
                    case &apos;bottom&apos;:
                        newSelect = {
                            top: select.top,
                            left: select.left,
                            width: select.width,
                            height: this.mouseDownSelect.height + deltaY
                        };
                        break;
                    case &apos;top-left&apos;:
                        newSelect = {
                            top: this.mouseDownSelect.top + deltaY,
                            left: this.mouseDownSelect.left + deltaX,
                            width: this.mouseDownSelect.width - deltaX,
                            height: this.mouseDownSelect.height - deltaY
                        };
                        break;
                    case &apos;top-right&apos;:
                        newSelect = {
                            top: this.mouseDownSelect.top + deltaY,
                            left: select.left,
                            width: this.mouseDownSelect.width + deltaX,
                            height: this.mouseDownSelect.height - deltaY
                        };
                        break;
                    case &apos;bottom-left&apos;:
                        newSelect = {
                            top: select.top,
                            left: this.mouseDownSelect.left + deltaX,
                            width: this.mouseDownSelect.width - deltaX,
                            height: this.mouseDownSelect.height + deltaY
                        };
                        break;
                    case &apos;bottom-right&apos;:
                        newSelect = {
                            top: select.top,
                            left: select.left,
                            width: this.mouseDownSelect.width + deltaX,
                            height: this.mouseDownSelect.height + deltaY
                        };
                        break;
                    }
                    if (newSelect) {
                        this.setSelect(newSelect);
                    }
                }
            }
        }
    }

    /**
    * &#x5904;&#x7406;&#x9F20;&#x6807;&#x70B9;&#x51FB;&#x5F39;&#x8D77;&#x4E8B;&#x4EF6;
    * @param {Event} event &#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;
    * @memberof AreaSelector
    * @private
    * @return {void}
    * @instance
    */
    handleMouseUp = event =&gt; {
        this.mouseDownPos = null;
        if (!this.state.resizeable &amp;&amp; this.state.select) {
            this.setState({resizeable: true});
        }
    }

    /**
    * React &#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1A;Render
    * @private
    * @see https://doc.react-china.org/docs/react-component.html#render
    * @see https://doc.react-china.org/docs/rendering-elements.html
    * @memberof AreaSelector
    * @return {ReactNode}
    * @instance
    */
    render() {
        const STYLE = {
            main: {
                backgroundColor: &apos;rgba(0,0,0,0.2)&apos;,
            },
            controller: {
                position: &apos;absolute&apos;,
                backgroundColor: &apos;rgba(255,255,255,0.4)&apos;,
                cursor: &apos;move&apos;,
                boxSizing: &apos;border-box&apos;,
                backgroundRepeat: &apos;none&apos;
            },
            controlBase: {
                position: &apos;absolute&apos;,
                width: 6,
                height: 6,
                border: &apos;1px solid #fff&apos;,
                borderRadius: 1,
                background: &apos;rgba(0, 0, 0, 0.6)&apos;,
            },
            controls: {
                left: {
                    left: -4,
                    top: &apos;50%&apos;,
                    marginTop: -3,
                    cursor: &apos;w-resize&apos;,
                },
                top: {
                    top: -4,
                    left: &apos;50%&apos;,
                    marginLeft: -3,
                    cursor: &apos;n-resize&apos;,
                },
                right: {
                    right: -4,
                    top: &apos;50%&apos;,
                    marginTop: -3,
                    cursor: &apos;e-resize&apos;,
                },
                bottom: {
                    bottom: -4,
                    left: &apos;50%&apos;,
                    marginLeft: -3,
                    cursor: &apos;s-resize&apos;,
                },
                &apos;top-left&apos;: {
                    left: -4,
                    top: -4,
                    cursor: &apos;nw-resize&apos;,
                },
                &apos;top-right&apos;: {
                    right: -4,
                    top: -4,
                    cursor: &apos;ne-resize&apos;,
                },
                &apos;bottom-left&apos;: {
                    left: -4,
                    bottom: -4,
                    cursor: &apos;sw-resize&apos;,
                },
                &apos;bottom-right&apos;: {
                    right: -4,
                    bottom: -4,
                    cursor: &apos;se-resize&apos;,
                },
            }
        };

        let {
            toolbar,
            toolbarHeight,
            style,
            toolbarStyle,
            img,
            onSelectArea,
            ...other
        } = this.props;

        style = Object.assign({}, STYLE.main, style);
        if (!this.state.resizeable) {
            Object.assign(style, {cursor: &apos;crosshair&apos;});
        }

        const controllerStyle = Object.assign({backgroundImage: img ? (`url(&quot;${img}&quot;)`) : &apos;none&apos;}, STYLE.controller);
        if (this.state.select) {
            Object.assign(controllerStyle, {left: this.state.select.left, top: this.state.select.top, width: this.state.select.width, height: this.state.select.height, backgroundPositionX: -this.state.select.left - 1, backgroundPositionY: -this.state.select.top - 1});
        } else {
            Object.assign(controllerStyle, {display: &apos;none&apos;});
        }

        let controls = null;
        if (this.state.resizeable &amp;&amp; this.state.select) {
            controls = Object.keys(STYLE.controls).map(key =&gt; {
                const controlStyle = Object.assign({}, STYLE.controlBase, STYLE.controls[key]);
                return &lt;div key={key} style={controlStyle} /&gt;;
            });
        }

        toolbarStyle = Object.assign({position: &apos;absolute&apos;, right: 0}, toolbarStyle);
        if (this.state.select &amp;&amp; this.contianer &amp;&amp; (this.state.select.top + this.state.select.height + toolbarHeight) &lt; this.contianer.clientHeight) {
            toolbarStyle.top = &apos;100%&apos;;
        } else {
            toolbarStyle.bottom = 0;
        }

        return (&lt;div
            {...other}
            ref={e =&gt; {this.contianer = e;}}
            style={style}
            onMouseUp={this.handleMouseUp}
            onMouseDown={this.handleMouseDown}
            onMouseMove={this.handleMouseMove}
        &gt;
            &lt;div style={controllerStyle} className=&quot;ants-border&quot;&gt;
                {controls}
                &lt;div style={toolbarStyle}&gt;{toolbar}&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;);
    }
}
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
